<template>
  <div id="public">
    <!--搜索-->
    <div class="search-content">
       <div style="display:flex;flex-wrap: wrap">
        <el-card shadow="never" class="card card1">
          <i class="el-icon-document-checked"></i>
          总礼物金额：{{count.totalMoney}}
        </el-card>
        <el-card shadow="never" class="card card2">
          <i class="el-icon-document-checked"></i>
          总利润金额：{{count.totalProfit}}
        </el-card>
      </div>
      <el-input v-model="name" placeholder="请输入用户昵称查询" prefix-icon="el-icon-search" clearable @change="inquiryList" />
      <el-input v-model="giftName" placeholder="请输入礼物名称查询" prefix-icon="el-icon-search" clearable @change="inquiryList" />
      <el-date-picker
        v-model="dateTimeRange[0]"
        type="datetime"
        clearable
        value-format="yyyy-MM-dd HH:mm:ss"
        placeholder="开始日期">
      </el-date-picker>
       <el-date-picker
        v-model="dateTimeRange[1]"
        type="datetime"
        clearable
        value-format="yyyy-MM-dd HH:mm:ss"
        placeholder="结束日期">
      </el-date-picker>
      <el-button type="primary" icon="el-icon-search" @click="inquiryList">查询</el-button>
    </div>
    <!--操作列表-->
    <div class="table">
      <el-table fit :data="tableData" style="width: 100%">
        <el-table-column label="礼物名称" prop="giftName" align="center"/>
        <el-table-column label="赠送礼物数量" prop="giftNum" align="center"/>
        <el-table-column label="赠送礼物所花金额" prop="giftMoney" align="center"/>
        <el-table-column label="礼物名称" prop="giftName" align="center"/>
        <el-table-column label="代理名称" prop="agentName" align="center" />
        <el-table-column label="用户名称" prop="memberName" align="center" />
        <el-table-column label="分润比例" prop="proportion" align="center" />
        <el-table-column label="分润金额" prop="profit" align="center" />
        <el-table-column label="赠送礼物时间" prop="giveTime" align="center" />
      </el-table>
      <!--分页-->
      <div class="pagination">
        <el-pagination
          :current-page.sync="currentPage"
          :page-sizes="[10,20,30,40,50]"
          layout="total,sizes, prev, pager, next"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
  </div>
</template>

<script>
    import {Message} from 'element-ui';
  import request from "../../utils/request";
    export default {
        name: "goldChangeRecord",
      data(){
        return{
          // 查询
          name:"",
          giftName:'',
          dateTimeRange:[],
          isClearable:true,
          // 列表数据
          tableData:[],
          //分页
          currentPage: 1,
          pageSize:10,
          total: 0,
          count:{
            totalMoney: 0,
            totalProfit: 0
          }
        }
      },
      mounted() {
        this.inquiryList();
      },
      methods:{
        isNotNull(value){
          return value !== null && value !== undefined && value !== "";
        },
        //查询列表
        inquiryList(){
          let that=this;
          that.tableData=[];
          let data={
            pageNumber:that.currentPage,
            pageSize:that.pageSize,
            filters:[]
          };
          if(that.isNotNull(that.name)){ //用户昵称
            data.filters.push({
              property:"m.name",
              value:that.name,
              operator: "like"
            })
          }
          if(that.isNotNull(that.giftName)){ //礼物名
            data.filters.push({
              property:"g.zh_cn_name",
              value:that.giftName,
              operator: "like"
            })
          }
          if(this.isNotNull(that.dateTimeRange)){ //赠送时间
            data.filters.push({
              property:"mg.time",
              value:that.dateTimeRange[0],
              operator: "ge"
            });
            data.filters.push({
              property:"mg.time",
              value:that.dateTimeRange[1],
              operator: "le"
            })
          }
          request({
            method: 'post',
            url: '/agent/profit/gift/list',
            headers:{
              'Content-Type': 'application/json;charset=UTF-8'
            },
            data:data
          }).then(function (res) {
            if(res.code===200){
              that.total=res.data.total;
              let arr=res.data.records;
              if(arr.length===0){
                that.tableData=[];
              }else{
                that.tableData=arr
              }
            }
          }).catch(function (error) {
            console.log(error);
          });
          //统计接口
          request({
            method: 'post',
            url: '/agent/profit/gift/count',
            headers:{
              'Content-Type': 'application/json;charset=UTF-8'
            },
            data:data
          }).then(function (res) {
            if(res.code===200){
              that.count=res.data;
            }
          }).catch(function (error) {
            console.log(error);
          });
        },
        // 改变每页显示的数量
        handleSizeChange(val) {
          this.pageSize=val;
          this.inquiryList();
        },
        //改变当前页
        handleCurrentChange(val) {
          this.currentPage=val;
          this.inquiryList();
        }
      }
    }
</script>

<style scoped src="../../assets/css/publicCss/publicStyle.css">

</style>
